<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        ul {
            list-style: none
        }

        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 1150px;
            height: 400px;
            margin: 50px auto;
            border: 1px solid red;
            overflow: hidden;
        }

        div li {
            width: 240px;
            height: 400px;
            float: left;
        }

        div ul {
            width: 1300px;
        }
    </style>
    <script src="../js/animate.js"></script>
</head>

<body>
    <div>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>

</html>
<script>
    //1.遍历 给每一个li添加背景图片

    var oLis = document.getElementsByTagName("li");
    for (var i = 0; i < oLis.length; i++) {

        var tmpIndex = i + 1;

        oLis[i].index = i;
        oLis[i].style.backgroundImage = `url(images/${tmpIndex}.jpg)`;

        //给每一个li绑定鼠标移入事件
        oLis[i].onmouseenter = function () {
            //所有的宽度变成 100px,而只给自己添加 800
            //排他思想
            for (var j = 0; j < oLis.length; j++) {

                if (j == this.index) {
                    //                    this.style.width = "800px";

                    animate(this, "width", 800)
                } else {
                    //                    oLis[j].style.width = "100px";
                    animate(oLis[j], "width", 100)
                }

            }

        }
    }

    //给ul绑定鼠标移出事件,让每一个li的宽度变240

    document.getElementsByTagName("ul")[0].onmouseleave = function () {

        var tmpLis = this.children;

        for (var i = 0; i < tmpLis.length; i++) {
            animate(tmpLis[i], "width", "240");
        }
    }
</script>